<template>
  <div class="friends">
    欢迎上传友链,上传友链请先注册账号
    <div class="friends-title"><h3>友 &nbsp &nbsp 链</h3></div>
    <div class="friends-content">
      <template v-for="item in usersList" >
        <a v-if="item.link" :href="item.link">
          <div class="friends-content-link" >
            <div class="avatar"><img :src="item.avatar_url" alt=""></div>
            <div >
              <div>{{item.nick_name}}</div>
              <div class="signature">{{item.signature}}</div>
            </div>
          </div>
        </a>
      </template>
      

    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useFriendsStore from '@/store/blog/friends'
const friendsStore = useFriendsStore()
friendsStore.getUserListActions(0, 50)
const { usersList } =storeToRefs(friendsStore)




</script>

<style scoped lang="less">
.friends {
  box-shadow: 0 0 6px rgba(0,0,0,.2);
  padding: 20px;
  margin-bottom: 20px;
  .friends-title {
    padding: 20px;
    text-align: center;
    color: #73767a;
    
  }
  .friends-content {
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    
    .friends-content-link {
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 6px rgba(0,0,0,.2);
      height: 100px;
      width: 200px;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
      margin: 10px 0;
      div {
        margin: 5px 0;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .avatar {
        margin-right: 10px;
      }
      .signature {
        font-size: 14px;
        width: 90px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .friends-content-link {
      transition: box-shadow 500ms ease;
      &:hover {
      box-shadow: 0 0 6px rgba(16, 105, 230, 0.845);
    }
    }
    
  }
}
</style>
